<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
  <title>每日一荐 2019-09 汇总 | lucifer的网络博客</title>
  
  <meta name="keywords" content="前端 leetocde 数据结构 算法 lucifer 大前端 性能优化 前端架构 前端工程化">
  
  
  <meta name="description" content="lucifer的个人博客，用来记录LeeCode刷题过程和心得，以及构建大前端知识体系">
  

  
  <link rel="alternate" href="/blog/atom.xml" title="lucifer的网络博客">
  

  <meta name="HandheldFriendly" content="True">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <!-- meta -->
  

  <!-- link -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.css">
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.10.1/css/all.min.css">
  

  
  <link rel="shortcut icon" type="image/x-icon" href="https://avatars0.githubusercontent.com/u/12479470?s=400&u=442571e44cbd0b67e3503e9551d4445c78f593f8&v=4">
  

  
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@19.9.9/css/style.css">
  

  <script>
    function setLoadingBarProgress(num) {
      document.getElementById('loading-bar').style.width=num+"%";
    }
  </script>

  
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-FVTTYT432Q"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-FVTTYT432Q');
    </script>
  
  
    <!-- ba -->
    <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?576ec211e11a69128667eb8c11a6cffe";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
    </script>
  
</head>

<body>
  
  
  <div class="cover-wrapper">
    <cover class='cover post half'>
      
        
  <h1 class='title'>lucifer</h1>


  <div class="m_search">
    <form name="searchform" class="form u-search-form">
      <input type="text" class="input u-search-input" placeholder="" />
      <i class="icon fas fa-search fa-fw"></i>
    </form>
  </div>

<div class='menu navgation'>
  <ul class='h-list'>
    
      
        <li>
          <a class="nav home" href="/blog/"
            
            
            id="blog">
            <i class='fas fa-home fa-fw'></i>&nbsp;主页
          </a>
        </li>
      
        <li>
          <a class="nav home" href="http://leetcode-solution.cn/"
            
            
            id="http:leetcode-solution.cn">
            <i class='fas fa-laptop-code fa-fw'></i>&nbsp;官网
          </a>
        </li>
      
        <li>
          <a class="nav home" href="/blog/friends/"
            
            
            id="blogfriends">
            <i class='fas fa-link fa-fw'></i>&nbsp;友链
          </a>
        </li>
      
        <li>
          <a class="nav home" href="/blog/about/"
            
            
            id="blogabout">
            <i class='fas fa-id-card-alt fa-fw'></i>&nbsp;联系我
          </a>
        </li>
      
    
  </ul>
</div>

      
    </cover>
    <header class="l_header pure">
  <div id="loading-bar-wrapper">
    <div id="loading-bar" class="pure"></div>
  </div>

	<div class='wrapper'>
		<div class="nav-main container container--flex">
      <a class="logo flat-box" href='/blog/' >
        
          lucifer的网络博客
        
      </a>
			<div class='menu navgation'>
				<ul class='h-list'>
          
  					
  						<li>
								<a class="nav flat-box" href="/blog/"
                  
                  
                  id="blog">
									<i class='fas fa-grin fa-fw'></i>&nbsp;回到主页
								</a>
							</li>
      			
  						<li>
								<a class="nav flat-box" href="/blog/categories/"
                  
                  
                  id="blogcategories">
									<i class='fas fa-folder-open fa-fw'></i>&nbsp;分类
								</a>
							</li>
      			
  						<li>
								<a class="nav flat-box" href="/blog/tags/"
                  
                  
                  id="blogtags">
									<i class='fas fa-hashtag fa-fw'></i>&nbsp;标签
								</a>
							</li>
      			
  						<li>
								<a class="nav flat-box" href="/blog/archives/"
                  
                  
                  id="blogarchives">
									<i class='fas fa-archive fa-fw'></i>&nbsp;归档
								</a>
							</li>
      			
      		
				</ul>
			</div>

			
				<div class="m_search">
					<form name="searchform" class="form u-search-form">
						<input type="text" class="input u-search-input" placeholder="搜索" />
						<i class="icon fas fa-search fa-fw"></i>
					</form>
				</div>
			
			<ul class='switcher h-list'>
				
					<li class='s-search'><a class="fas fa-search fa-fw" href='javascript:void(0)'></a></li>
				
				<li class='s-menu'><a class="fas fa-bars fa-fw" href='javascript:void(0)'></a></li>
			</ul>
		</div>

		<div class='nav-sub container container--flex'>
			<a class="logo flat-box"></a>
			<ul class='switcher h-list'>
				<li class='s-comment'><a class="flat-btn fas fa-comments fa-fw" href='javascript:void(0)'></a></li>
        
          <li class='s-toc'><a class="flat-btn fas fa-list fa-fw" href='javascript:void(0)'></a></li>
        
			</ul>
		</div>
	</div>
</header>
	<aside class="menu-phone">
    <header>
		<nav class="menu navgation">
      <ul>
        
          
            <li>
							<a class="nav flat-box" href="/blog/"
                
                
                id="blog">
								<i class='fas fa-clock fa-fw'></i>&nbsp;近期文章
							</a>
            </li>
          
            <li>
							<a class="nav flat-box" href="/blog/archives/"
                
                
                id="blogarchives">
								<i class='fas fa-archive fa-fw'></i>&nbsp;文章归档
							</a>
            </li>
          
            <li>
							<a class="nav flat-box" href="/blog/about/"
                
                
                id="blogabout">
								<i class='fas fa-info-circle fa-fw'></i>&nbsp;关于小站
							</a>
            </li>
          
       
      </ul>
		</nav>
    </header>
	</aside>
<script>setLoadingBarProgress(40);</script>

  </div>


  <div id="container" class="l_body">
    <div class='body-wrapper'>
      <div class='l_main'>
  

  <article id="post" class="post white-box article-type-post" itemscope itemprop="blogPost">
    


  <section class='meta'>
    
    
    <div class="meta" id="header-meta">
      
        
  
    <h1 class="title">
      <a href="/blog/2019/12/11/daily-featured-2019-09/">
        每日一荐 2019-09 汇总
      </a>
    </h1>
  


      
      <div class='new-meta-box'>
        
          
        
          
            
  <div class='new-meta-item author'>
    
      <a href="https://lucifer.ren/blog" rel="nofollow">
        
          <img src="https://avatars0.githubusercontent.com/u/12479470?s=400&u=442571e44cbd0b67e3503e9551d4445c78f593f8&v=4">
        
        <p>lucifer</p>
      </a>
    
  </div>


          
        
          
            <div class="new-meta-item date">
  <a class='notlink'>
    <i class="fas fa-calendar-alt" aria-hidden="true"></i>
    <p>2019-12-11</p>
  </a>
</div>

          
        
          
            
  
  <div class='new-meta-item category'>
    <a href='/blog/categories/每日一荐/2019-09/' rel="nofollow">
      <i class="fas fa-folder-open" aria-hidden="true"></i>
      <p>每日一荐&nbsp;/&nbsp;2019-09</p>
    </a>
  </div>


          
        
          
            
  
    <div class="new-meta-item browse busuanzi">
      <a class='notlink'>
        <i class="fas fa-eye" aria-hidden="true"></i>
        <p>
          <span id="busuanzi_value_page_pv">
            <i class="fas fa-spinner fa-spin fa-fw" aria-hidden="true"></i>
          </span>
        </p>
      </a>
    </div>
  


          
        
          
            

          
        
          
            
  
    <div style="margin-right: 10px;">
      <span class="post-time">
        <span class="post-meta-item-icon">
          <i class="fa fa-keyboard"></i>
          <span class="post-meta-item-text">  字数统计: </span>
          <span class="post-count">4.3k字</span>
        </span>
      </span>
      &nbsp; | &nbsp;
      <span class="post-time">
        <span class="post-meta-item-icon">
          <i class="fa fa-hourglass-half"></i>
          <span class="post-meta-item-text">  阅读时长≈</span>
          <span class="post-count">15分</span>
        </span>
      </span>
    </div>
  

          
        
      </div>
      
        <hr>
      
    </div>
  </section>


    <section class="article typo">
      <div class="article-entry" itemprop="articleBody">
        <p><img src="https://tva1.sinaimg.cn/large/006y8mN6ly1g8d0sktqrwj30hs07maae.jpg" alt></p>
<p>每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。</p>
<p>项目主页维护当前月份的内容，想看往期内容，可以去<a href="https://github.com/azl397985856/daily-featured" target="_blank" rel="noopener">每日一荐主仓库</a>翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。</p>
<a id="more"></a>

<h2 id="2019-09"><a href="#2019-09" class="headerlink" title="2019-09"></a>2019-09</h2><h3 id="2019-09-30-工具"><a href="#2019-09-30-工具" class="headerlink" title="2019-09-30[工具]"></a>2019-09-30[工具]</h3><p>今天是 9 月的最后一天，明天就是十一了，提前祝大家国庆节快乐 ～～～ 🎉🎉🎉🎉🎉🎉🎉 ！</p>
<p>今天再来给大家安利 6 个 chrome 扩展程序，排名不分先后。</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6ly1g7hccis83hj30g30gl3z1.jpg" alt></p>
<ol>
<li>Proxy SwitchyOmega</li>
</ol>
<p>此扩展为 SwitchySharp 的升级版，可替代 SwitchyPlus 或 Proxy Switchy. 可轻松快捷地管理和切换多个代理设置，是一个我使用多年的一个插件，配合 PAC 食用味道更好。</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7hcjh2gmjj30hs0b43ym.jpg" alt></p>
<p><a href="https://chrome.google.com/webstore/detail/proxy-switchyomega/padekgcemlokbadohgkifijomclgjgif" target="_blank" rel="noopener">下载地址</a></p>
<ol start="2">
<li>OneTab</li>
</ol>
<p>节省高达 95％的内存，并减轻标签页混乱现象。 有些标签关了舍不得，不关太多看的很乱并且更关键的是占用内存。有了这个工具就不存在这些问题了。</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6ly1g7hchdk0tyj30hs0b4js1.jpg" alt></p>
<p><a href="https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall" target="_blank" rel="noopener">下载地址</a></p>
<ol start="3">
<li>AdBlock Plus</li>
</ol>
<p>Adblock Plus 是世界上最流行的浏览器扩展，世界各地有数百万用户在使用它。这是一个社区驱动的开源项目，有数百名志愿者为 Adblock Plus 的成功作出了贡献，以实现所有烦人的广告被自动阻挡。</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7hcm4giztj30u70anjs2.jpg" alt></p>
<p><a href="https://chrome.google.com/webstore/search/AdBlock" target="_blank" rel="noopener">下载地址</a></p>
<ol start="4">
<li>Multi-highlight</li>
</ol>
<p>普通的网页搜索只能一个一个搜索，不能同时搜索多个关键字，这个扩展提供了这种功能上的扩展。</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6ly1g7hcoq78bhj30hs0b4q3i.jpg" alt></p>
<p><a href="https://chrome.google.com/webstore/detail/multi-highlight/pfgfgjlejbbpfmcfjhdmikihihddeeji" target="_blank" rel="noopener">下载地址</a></p>
<ol start="5">
<li>HTML5 Outliner</li>
</ol>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6ly1g7hcpx8en4j30hs09vmxp.jpg" alt></p>
<p>我平时再看文章或者文档的时候习惯先看一遍目录或者大纲，然后再决定我到底要不要看，看哪里。我相信很多人和我一样有着同样的习惯。但是很多网站，包括 infoq，知乎等大网站这方面都做的比较差。下图是我的个人博客的大纲功能：</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6ly1g7hcwcm5wgj30uo0prq5e.jpg" alt></p>
<p>因此这款工具对于我这种人来说就非常重要了，他能根据当前网页的结果快速生成大纲，并且支持锚点功能，当然它也有很多覆盖不到的情况，因为标题的种类实现太多了，大家完全可以写一个<code>div class = &#39;header&#39;</code>从而让这个工具无用武之地。 这也从侧面说明了语义化的重要性，不仅对于障碍人士重要，对于无障碍人士也有很大的意义。</p>
<p><a href="https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo" target="_blank" rel="noopener">下载地址</a></p>
<ol start="6">
<li>眼睛护航</li>
</ol>
<p>把网页背景变成眼睛保护色或适合夜晚阅读的夜间模式，一些无法变色的小区块可以通过单击进行变色。到了晚上将自动从绿色护眼模式变为夜间阅读模式。当然，也可以手动强制使用绿色模式或夜间模式。</p>
<p>这在一些体验差的网站上极为重要，还有一些大量使用亮瞎眼的颜色网站也有很好的作用，类似提升阅读体验的扩展还有<a href="https://chrome.google.com/webstore/detail/simpread-reader-view/ijllcpnolfcooahcekpamkbidhejabll?hl=zh-CN" target="_blank" rel="noopener">简悦</a>。</p>
<p><a href="https://chrome.google.com/webstore/detail/care-your-eyes/fidmpnedniahpnkeomejhnepmbdamlhl" target="_blank" rel="noopener">下载地址</a></p>
<h3 id="2019-09-29-工具"><a href="#2019-09-29-工具" class="headerlink" title="2019-09-29[工具]"></a>2019-09-29[工具]</h3><p>如果你是一个站长，那么你一定需要一个网站速度测试工具。</p>
<p>你的用户如果都是中国用户，那么用<a href="http://tool.chinaz.com/speedtest/lucifer.ren" target="_blank" rel="noopener">站长工具-国内测试</a>应该就够用了。 如果你的用户有海外的话，可以试试<a href="https://tool.chinaz.com/speedworld/" target="_blank" rel="noopener">站长工具-国际测试</a></p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6ly1g7eb8e0j03j30lc0ftq3q.jpg" alt><br>(国内测速)</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6ly1g7eb8xtac5j30kn097dfz.jpg" alt><br>(国际测试)</p>
<blockquote>
<p>不得不吐槽下，网站体验做的不太好，而且广告有点多。</p>
</blockquote>
<p>另外还有一个网站，不过这个只能够测试国内的网速，<a href="https://www.17ce.com/" target="_blank" rel="noopener">17ce</a>的体验做的稍微好一点，广告也没有那么显眼，如果你的客户只是国内，不妨考虑这个。</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7ebbwxvykj31340l53z8.jpg" alt></p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7ebcj8p59j30xq0hcq3l.jpg" alt></p>
<p>最后介绍一个国外的网站<a href="https://tools.pingdom.com" target="_blank" rel="noopener">pingdom</a>，如果客户是全球的，可以考虑用这个，这个是这几个中用户体验做的最好的。给出的技术指标比较多一点，但是他没有区域分布热力图, 并且支持的区域也不多。</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6ly1g7ebja8fm6j30vy0aft93.jpg" alt><br><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7ebgcr1elj30uf0llaay.jpg" alt><br><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7ebhmc7iij30v20nh74w.jpg" alt></p>
<h3 id="2019-09-27-类库"><a href="#2019-09-27-类库" class="headerlink" title="2019-09-27[类库]"></a>2019-09-27[类库]</h3><p>之前我写了一篇 <a href="https://github.com/azl397985856/frontend-test" target="_blank" rel="noopener">【前端测试】</a> 的草稿，一直搁置到现在，之前我做后端的时候，写测试尤其是单元测试是很普遍的。但是做前端这么久发现大家对这方面不是很重视， 其实前端也是非常需要做测试的。</p>
<p>今天给大家推荐的是一个非常流行的前端测试框架 jest 的 GUI 工具<a href="https://github.com/Raathigesh/majestic" target="_blank" rel="noopener">majestic</a> (⚡ Zero config GUI for Jest)</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6ly1g7d2hpkzxuj30ym0u0wg9.jpg" alt></p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7d2icroztj30cx0a33yn.jpg" alt></p>
<h3 id="2019-09-26-工具"><a href="#2019-09-26-工具" class="headerlink" title="2019-09-26[工具]"></a>2019-09-26[工具]</h3><p>你一定有想用某一个功能的快捷键，却想不出来的情况。也一定面临过多个软件快捷键不统一带来的烦恼，比如 A 软件<code>CMD + S</code>是保存， 另外一个软件 B 是<code>Shift + S</code>。</p>
<p>对于第一种问题，我们可以用一个叫 cheatsheet 的 mac 软件，有了它你就可以通过长按 command 键，从而查看当前应用的快捷键。<br><img src="https://tva1.sinaimg.cn/large/006y8mN6ly1g7bja8uiysj31c20ohdkr.jpg" alt></p>
<p>cheatsheet 下载地址： <a href="https://cheatsheet-mac.en.softonic.com/mac" target="_blank" rel="noopener">https://cheatsheet-mac.en.softonic.com/mac</a></p>
<blockquote>
<p>顺便吐槽一下，cheatsheet 官网用户体验这块做的不怎么样</p>
</blockquote>
<p>对于按键不统一的问题，我们可以直接修改对应软件的快捷键即可，毕竟大多数软件都是支持快捷键定制的，还有一些<code>服务</code>快捷键我们可以去<code>系统偏好设置 - 键盘 - 服务</code>中修改。</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7bjf9q87uj30ik0g1jry.jpg" alt></p>
<p>另外给大家安利一个软件<code>Karabiner-Elements</code>, 它是一个 mac 上好用的键盘定制工作，可以用来改键，定制超级键等，更多功能等你挖掘。</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6ly1g7bjhb8tfzj30rq0fvjrh.jpg" alt></p>
<blockquote>
<p>配合 HHKB 效果更佳</p>
</blockquote>
<p>Karabiner-Elements 下载地址： <a href="https://github.com/tekezo/Karabiner-Elements" target="_blank" rel="noopener">https://github.com/tekezo/Karabiner-Elements</a></p>
<h3 id="2019-09-25-技能"><a href="#2019-09-25-技能" class="headerlink" title="2019-09-25[技能]"></a>2019-09-25[技能]</h3><p>熟练使用命令行是一种常常被忽视，或者被认为难以掌握的技能，一旦掌握，会极大提高你工作的效率。当你能够熟练掌握这里列出的所有技巧时，你就学会了很多关于命令行的东西了。</p>
<p>今天介绍的这个仓库，首发于 Quora， 后面迁移到了 Github，并由众多高手做出了许多改进，现在已经有 6W+ Star 了。</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6ly1g7aupdnzicj30dc08040e.jpg" alt></p>
<p>仓库目录（目录是我用工具自己抓的，非官方提供）：</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7aupokxczj30ed0bp74e.jpg" alt></p>
<p>仓库地址： <a href="https://github.com/jlevy/the-art-of-command-line/blob/master/README-zh.md" target="_blank" rel="noopener">https://github.com/jlevy/the-art-of-command-line/blob/master/README-zh.md</a></p>
<h3 id="2019-09-24-工具"><a href="#2019-09-24-工具" class="headerlink" title="2019-09-24[工具]"></a>2019-09-24[工具]</h3><p>今天给大家分享的是 VSCode 前一段时间推出的 SSH 扩展，实际使用效果非常棒，除了延迟，让你感觉不到你是在操作远程的文件。虽然有延迟，但是也仅仅限于你和服务器有 IO 交互的情况下才会有感知，结合我的使用体验来说，是“几乎”感觉不到差异（当然也有可能我的网比较快）。</p>
<p>VSCode SSH 扩展允许你连接到远程的主机，虚拟机或者是容器。而你所需要做的仅仅是点击 SSH 面板，然后配置一下就好了，配置也极其简单，对于经常使用 SSH 的你来说千万不要错过了。</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g79mut0ml3j30d40ebjra.jpg" alt></p>
<p>下面是官方提供的原理架构图：</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6ly1g79mw5gg3mj30qw08q0tc.jpg" alt></p>
<p>地址： <a href="https://code.visualstudio.com/docs/remote/ssh" target="_blank" rel="noopener">https://code.visualstudio.com/docs/remote/ssh</a></p>
<h3 id="2019-09-23-好文"><a href="#2019-09-23-好文" class="headerlink" title="2019-09-23[好文]"></a>2019-09-23[好文]</h3><p>为什么一行 80 个字符是一个值得遵守的规范，即使你拥有 4k 显示器？</p>
<p>我个人一直是 80 字符的践行者，不仅仅是因为是这大家都普遍采用的标准，更重要的是我个人更习惯多窗口平铺的方式来展示我的窗口，这样效率更高一点，因此太大肯定会影响窗口平铺，太小又不方便阅读，80 对我来说其实刚刚好，其他比较常见的还有 100 字符等， 现在就让我们来看下为什么一行 80 个字符是一个值得遵守的规范吧。</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7hdn405nqj31hc0u0asd.jpg" alt></p>
<p>文章地址： <a href="https://nickjanetakis.com/blog/80-characters-per-line-is-a-standard-worth-sticking-to-even-today" target="_blank" rel="noopener">https://nickjanetakis.com/blog/80-characters-per-line-is-a-standard-worth-sticking-to-even-today</a></p>
<h3 id="2019-09-20-工具"><a href="#2019-09-20-工具" class="headerlink" title="2019-09-20[工具]"></a>2019-09-20[工具]</h3><p>我开启了<a href="https://lucifer.ren/blog/">个人博客</a>，增加了评论，分类，统计，RSS，歌单等功能， 之后的文章会在博客首发。 感兴趣的可以 RSS 订阅我的博客。订阅方法我画了个图。</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7hdn4kb9ej30pk0g03zx.jpg" alt="rss-feed"></p>
<p>RSS 是一种消息来源格式规范，用以聚合经常发布更新数据的网站，例如博客文章、新闻、音频或视频的网摘。RSS 文件包含全文或是节录的文字，再加上发布者所订阅之网摘数据和授权的元数据。</p>
<p>简单来说只要提供了符合 RSS 格式的数据源，你就可以订阅，然后在 RSS 阅读器上进行查看更新内容。</p>
<p>关于 RSS 订阅，今天我推荐的就是一个 RSS 的聚合器 feedly。<a href="https://feedly.com" target="_blank" rel="noopener">https://feedly.com</a></p>
<p>Feedly 是一个 RSS 聚合器应用程序，支持各种网页浏览器和运行 iOS 或 Android 的移动设备，也是一个基于云端的服务。其从各种在线资源聚合用户自定的新闻订阅源，并可与他人分享。</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7hdn51dupj313j0hjjtr.jpg" alt="feedly"></p>
<p>后续有机会我会向大家推荐我的 RSS 订阅源。</p>
<h3 id="2019-09-19-工具"><a href="#2019-09-19-工具" class="headerlink" title="2019-09-19[工具]"></a>2019-09-19[工具]</h3><p>今天给大家推荐一款 MarkDown 编辑器。 MarkDown 在程序员中的使用频率是非常高的，Github 是最早一批对 MarkDown 语法支持度比较好的平台之一。我日常写文档，记笔记等都采用 MarkDown 格式来书写。 它不仅书写方便，而且由于其格式比较规范，因此理论上可以通过一些“转换规则”将其转化为各种表现形式，市面上也有很多基于 Markdown 的渲染器，比如<a href="https://github.com/markdown-it/markdown-it" target="_blank" rel="noopener">markdown-it</a>，也有很多基于这些渲染器制作的产品，比如<a href="https://github.com/docsifyjs/docsify" target="_blank" rel="noopener">docsify</a>。</p>
<p>早些时候，我使用的比较多的是<a href="https://macdown.uranusjr.com" target="_blank" rel="noopener">MacDown</a>和 VSCode 自带的 Markdown 功能。这两个功能非常简单，但是却能满足我当时的需求，之后我开始经常用 Markdown 更新文章之类的，因此这些就显得不太够用了，现在我用的是 Yu Writer， 算是一个值得推荐的国人开发的 MarkDown 编辑器，功能非常强大而且免费。 你可能听过 MWeb，但是它是收费的，功能和这个比起来也并不占优势。</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7hdn5yydqj31hc0u0tep.jpg" alt="yu-writer"></p>
<p>下载地址：<a href="https://ivarptr.github.io/yu-writer.site/" target="_blank" rel="noopener">https://ivarptr.github.io/yu-writer.site/</a></p>
<h3 id="2019-09-18-工具"><a href="#2019-09-18-工具" class="headerlink" title="2019-09-18[工具]"></a>2019-09-18[工具]</h3><p>前天分享了我的 chrome 插件管理器，今天我们就来分享我的《娱乐插件》。</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7hdn6fnetj30fe04adg6.jpg" alt="extension-joy"></p>
<ol>
<li>listen1</li>
</ol>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7hdn70jguj301z021we9.jpg" alt="listen1-icon"></p>
<p>娱乐插件第一个要分享的是一个听歌的插件，各个平台都有一些独家的音乐，就像视频网站一样，这就可怜了我们这些消费者。<br>如果想要听所有的音乐就要办理各个 APP 的会员，或者在多个音乐 APP 中切换。</p>
<p>这个插件能让我们听到所有国内几个主流大平台的所有音乐，足不出户畅享所有的音乐，并且值得称赞的是它支持会员系统，你可以保存<br>你的歌单，甚至可以直接登陆你的 Github 账户同步多端的数据。</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7hdn7ialcj30pa0j3dyl.jpg" alt="listen1"></p>
<p>仓库地址：<a href="https://github.com/listen1/listen1" target="_blank" rel="noopener">https://github.com/listen1/listen1</a></p>
<ol start="2">
<li>Video Downloader Professional</li>
</ol>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7hdn8f9wkj3022020jr5.jpg" alt="video-downloader-icon"></p>
<p>我主要用它来下载 Youtube 的视频，据说可以下载任何视频网站的视频，但是我亲测了几个网站不可以。</p>
<p>扩展下载地址：<a href="https://chrome.google.com/webstore/detail/jpaglkhbmbmhlnpnehlffkgaaapoicnk" target="_blank" rel="noopener">https://chrome.google.com/webstore/detail/jpaglkhbmbmhlnpnehlffkgaaapoicnk</a></p>
<ol start="3">
<li>Bilibili 全家桶</li>
</ol>
<p>经常看番的朋友怎么能少的了几个好用的插件护体呢？</p>
<p>这几个插件的功能基本满足了我看番的所有需求，包括弹幕合并，查找弹幕，自动签到，一键直达，猜你喜欢等等，大家可以安装下自己体验。</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7hdn8wijhj301x01q0sj.jpg" alt="helper-icon"></p>
<p><a href="https://chrome.google.com/webstore/detail/kpbnombpnpcffllnianjibmpadjolanh" target="_blank" rel="noopener">bilibili 助手</a></p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7hdn9c9r3j30250210sk.jpg" alt="pakku-icon"></p>
<p><a href="http://s.xmcp.ml/pakkujs/?src=wext_homepage" target="_blank" rel="noopener">pakku 哔哩哔哩弹幕过滤器</a></p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7hdnades9j3022020742.jpg" alt="danmu-icon"></p>
<p><a href="https://chrome.google.com/webstore/detail/ngjddnobeppdekpmimhiamkoonoaccdf" target="_blank" rel="noopener">bilibili 猜你喜欢</a></p>
<h3 id="2019-09-17-学习方法"><a href="#2019-09-17-学习方法" class="headerlink" title="2019-09-17[学习方法]"></a>2019-09-17[学习方法]</h3><p>很多人想要问我“你的成长史是怎么样的？能不能分享一下你的菜鸡成长史”。 开始我是抵触的，这种东西写的不好大家会骂你，写的“太好”也会骂你。</p>
<p>今天我就来做个“lucifer”系列的开篇吧，用图来描述“lucifer 的一天”。</p>
<p>lucifer 的早晨：</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7hdnas1atj30bl0de40e.jpg" alt="morning-lucifer"></p>
<p>lucifer 搬砖的一天开始了：</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7hdnbsm32j30bl08c74r.jpg" alt="morning-lucifer"></p>
<p>lucifer 的晚上：</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7hdnclwccj30bl05aq39.jpg" alt="morning-lucifer"></p>
<h3 id="2019-09-16-工具"><a href="#2019-09-16-工具" class="headerlink" title="2019-09-16[工具]"></a>2019-09-16[工具]</h3><p>经常有同学问我“你的这个扩展看着不错，叫什么”， “有什么好用的扩展程序推荐么？”。</p>
<p>因此我打算出一个《工具推荐》专题， 然后细分一个类别《工具推荐 - chrome 插件》。 这个算是这个系列的开篇之作，我默默翻开自己的 chrome 插件列表来看，<br>有什么好用的推荐给大家。突然灵机一动，干脆把这个“扩展插件管理器”安利给大家好了。之后我会向大家推荐更多好用好玩的插件，有“工具”，“效率”， “娱乐”，“前端”等等。</p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7hdnd1mbdj30fn0g1ab3.jpg" alt="chrome-extension-manager"></p>
<p>我的 chrome 插件差不多有 60 多个，插件多起来的时候，良好的分类，开启关闭，禁用，卸载等管理就变得非常重要了。<br>毕竟谁也不想在众多插件中寻寻觅觅的感觉，也不想因为开启太多插件吃我们宝贵的内存吧？<br>这个插件的名字是<a href="https://chrome.google.com/webstore/detail/extension-manager/gjldcdngmdknpinoemndlidpcabkggco" target="_blank" rel="noopener">扩展管理器（Extension Manager)</a></p>
<blockquote>
<p>对于没有梯子的同学，我还贴心地给大家准备了我从官方下载的扩展文件。 <a href="./assets/2019-09/extension-manager.crx">链接</a></p>
</blockquote>
<h3 id="2019-09-12-类库"><a href="#2019-09-12-类库" class="headerlink" title="2019-09-12[类库]"></a>2019-09-12[类库]</h3><p>今天给大家推荐的是一个在给 Git 提交记录增加 emojis 的仓库。</p>
<p>或许你知道<a href="https://gist.github.com/stephenparish/9941e89d80e2bc58a153" target="_blank" rel="noopener">AngularJS Git Commit Message Conventions</a> , 现在很多开源项目和内部项目都在使用<br>，是一道非常流行的 git commit message 规范。 它的好处就是你可以很轻松地通过提交信息，看出<code>这次提交干的什么，影响范围等</code>，比如是新特性，修复 bug，增加文档， 重构代码等。</p>
<p>这个项目可以说更进一步，通过图的形式，让你更快地感知到这些信息，<code>可视化形式的沟通毫无疑问是最最有效的。因为人的大脑更擅长处理图像。</code> 项目提供了几十种 emoji，几乎覆盖了所有的场景。 仓库地址： <a href="https://gitmoji.carloscuesta.me/" target="_blank" rel="noopener">https://gitmoji.carloscuesta.me/</a></p>
<p><img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g7hdndga7qj30w20nedi8.jpg" alt="git-emoji"></p>
<h3 id="2019-09-11-技能"><a href="#2019-09-11-技能" class="headerlink" title="2019-09-11[技能]"></a>2019-09-11[技能]</h3><p>Google 内部有很多通用的最佳实践，在这我推荐一个项目，这是挂在 google group 下的一套通用的工程实战指南，被各个项目广泛使用，覆盖全部的编程语言。</p>
<p>这个仓库分成两部分：</p>
<ol>
<li><p>这部分是给 Code Reviewer（代码评审者）的指南</p>
</li>
<li><p>这部分是给 Change Author（CL 作者）的指南</p>
</li>
</ol>
<p>代码评审者指南本来是一个完整的文档，一共分为 6 部分，读者可根据需要阅读。</p>
<p>修改列表（Change List/CL）制定者指南包括一些浏览代码评审的最佳方式，开发者可以快速处理评审结果。</p>
<p>项目地址： <a href="https://github.com/google/eng-practices" target="_blank" rel="noopener">https://github.com/google/eng-practices</a></p>
<h3 id="2019-09-10-类库"><a href="#2019-09-10-类库" class="headerlink" title="2019-09-10[类库]"></a>2019-09-10[类库]</h3><p>今天给大家推荐的是一个打包平台，不知道大家有没有听说过“polyfill.io”，用法有点像。</p>
<p>这个仓库是 fork 自 packed，并进行了魔改，你可以将多个包打包成一个单独的 ESM，支持多种 options， 仓库地址： <a href="https://github.com/webcomponents-dev/packd-es" target="_blank" rel="noopener">https://github.com/webcomponents-dev/packd-es</a></p>
<h3 id="2019-09-09-类库"><a href="#2019-09-09-类库" class="headerlink" title="2019-09-09[类库]"></a>2019-09-09[类库]</h3><p>一个可以将草稿转化 HTML 的工具，利用了机器学习来生成页面。 你可以手画一些东西，然后将其直接生成静态页面。缺点也很明显，一方面是静态的，因此没有什么交互，对于交互强的应用没什么用。<br>其次就是生成的是 HTML，可维护性会比较差，如果生成类似 JSX 这样的中间产物可能会好一点。当然市面上其实已经有了生成 JSX 产物的开源框架了。 地址：<a href="https://github.com/ashnkumar/sketch-code" target="_blank" rel="noopener">https://github.com/ashnkumar/sketch-code</a></p>
<h3 id="2019-09-06-学习方法-好文"><a href="#2019-09-06-学习方法-好文" class="headerlink" title="2019-09-06[学习方法, 好文]"></a>2019-09-06[学习方法, 好文]</h3><p>如何培养自己的程序员思维。- Problem-solving is the meta-skill. 文章地址： <a href="https://learnworthy.net/how-to-think-like-a-programmer/?utm_source=quora&amp;utm_medium=referral" target="_blank" rel="noopener">https://learnworthy.net/how-to-think-like-a-programmer/?utm_source=quora&amp;utm_medium=referral</a></p>
<h3 id="2019-09-05-类库"><a href="#2019-09-05-类库" class="headerlink" title="2019-09-05[类库]"></a>2019-09-05[类库]</h3><p>这是微软开源的内部用来构建大型应用的工具库，包括接口管理，文档管理，代码仓库管理等。 地址： <a href="https://github.com/microsoft/web-build-tools" target="_blank" rel="noopener">https://github.com/microsoft/web-build-tools</a></p>
<h2 id="历史汇总"><a href="#历史汇总" class="headerlink" title="历史汇总"></a>历史汇总</h2><ul>
<li>暂无历史汇总</li>
</ul>
<h2 id="关注我"><a href="#关注我" class="headerlink" title="关注我"></a>关注我</h2><p>我重新整理了下自己的公众号，并且我还给它换了一个名字<code>脑洞前端</code>，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。</p>
<p>在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。</p>
<p>之后我的文章会同步到微信公众号 <code>脑洞前端</code> ，你可以关注获取最新的文章，并和我进行交流。</p>
<p>另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。</p>
<img width="300" src="https://tva1.sinaimg.cn/large/006y8mN6ly1g7he9xdtmyj30by0byaac.jpg">

<h2 id="贡献"><a href="#贡献" class="headerlink" title="贡献"></a>贡献</h2><ul>
<li>如果有想法和创意，请提<a href="https://github.com/azl397985856/daily-featured/issues" target="_blank" rel="noopener">issue</a>或者进群提</li>
<li>如果想贡献代码，请提<a href="https://github.com/azl397985856/daily-featured/pulls" target="_blank" rel="noopener">PR</a></li>
<li>如果需要修改项目中图片，<a href="https://github.com/azl397985856/daily-featured/tree/master/assets" target="_blank" rel="noopener">这里</a>存放了项目中绘制图的源代码， 大家可以用<a href="https://www.draw.io/" target="_blank" rel="noopener">draw.io</a>打开进行编辑。</li>
</ul>
<h2 id="License"><a href="#License" class="headerlink" title="License"></a>License</h2><p><a href="./LICENSE">Apache-2.0</a></p>

      </div>
      
        <br>
        


  <section class='meta' id="footer-meta">
    <div class='new-meta-box'>
      
        
          <div class="new-meta-item date" itemprop="dateUpdated" datetime="2020-02-25T10:41:56+08:00">
  <a class='notlink'>
    <i class="fas fa-clock" aria-hidden="true"></i>
    <p>更新于 2020年2月25日</p>
  </a>
</div>

        
      
        
          
  
  <div class="new-meta-item meta-tags"><a class="tag" href="/blog/tags/每日一荐/" rel="nofollow"><i class="fas fa-tag" aria-hidden="true"></i><p>每日一荐</p></a></div>


        
      
        
          
  <div class="new-meta-item share -mob-share-list">
  <div class="-mob-share-list share-body">
    
      
        <a class='qrcode' rel="external nofollow noopener noreferrer" href=''>
        
          <img src="https://cdn.jsdelivr.net/gh/xaoxuu/assets@19.1.9/logo/128/qrcode.png">
        
        </a>
      
    
      
        <a class="-mob-share-qq" title="QQ好友" rel="external nofollow noopener noreferrer"
          
          href="http://connect.qq.com/widget/shareqq/index.html?url=https://lucifer.ren/blog/2019/12/11/daily-featured-2019-09/&title=每日一荐 2019-09 汇总 | lucifer的网络博客&pics=https://avatars0.githubusercontent.com/u/12479470?s=400&u=442571e44cbd0b67e3503e9551d4445c78f593f8&v=4&summary=
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
项目主页维护当前月份的内容，想看往期内容，可以去每日一荐主仓库翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。"
          
          >
          
            <img src="https://cdn.jsdelivr.net/gh/xaoxuu/assets@19.1.9/logo/128/qq.png">
          
        </a>
      
    
      
        <a class="-mob-share-qzone" title="QQ空间" rel="external nofollow noopener noreferrer"
          
          href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://lucifer.ren/blog/2019/12/11/daily-featured-2019-09/&title=每日一荐 2019-09 汇总 | lucifer的网络博客&pics=https://avatars0.githubusercontent.com/u/12479470?s=400&u=442571e44cbd0b67e3503e9551d4445c78f593f8&v=4&summary=
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
项目主页维护当前月份的内容，想看往期内容，可以去每日一荐主仓库翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。"
          
          >
          
            <img src="https://cdn.jsdelivr.net/gh/xaoxuu/assets@19.1.9/logo/128/qzone.png">
          
        </a>
      
    
      
        <a class="-mob-share-weibo" title="微博" rel="external nofollow noopener noreferrer"
          
          href="http://service.weibo.com/share/share.php?url=https://lucifer.ren/blog/2019/12/11/daily-featured-2019-09/&title=每日一荐 2019-09 汇总 | lucifer的网络博客&pics=https://avatars0.githubusercontent.com/u/12479470?s=400&u=442571e44cbd0b67e3503e9551d4445c78f593f8&v=4&summary=
每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。
项目主页维护当前月份的内容，想看往期内容，可以去每日一荐主仓库翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。"
          
          >
          
            <img src="https://cdn.jsdelivr.net/gh/xaoxuu/assets@19.1.9/logo/128/weibo.png">
          
        </a>
      
    
  </div>
</div>



        
      
    </div>
  </section>


      
      
          <div class="prev-next">
              
                  <section class="prev">
                      <span class="art-item-left">
                          <h6><i class="fas fa-chevron-left" aria-hidden="true"></i>&nbsp;上一页</h6>
                          <h4>
                              <a href="/blog/2019/12/11/browser-event/" rel="prev" title="浏览器事件模型">
                                
                                    浏览器事件模型
                                
                              </a>
                          </h4>
                          
                              
                              <h6 class="tags">
                                  <a class="tag" href="/blog/tags/浏览器/"><i class="fas fa-tag fa-fw" aria-hidden="true"></i> 浏览器</a> <a class="tag" href="/blog/tags/事件/"><i class="fas fa-tag fa-fw" aria-hidden="true"></i> 事件</a>
                              </h6>
                          
                      </span>
                  </section>
              
              
                  <section class="next">
                      <span class="art-item-right" aria-hidden="true">
                          <h6>下一页&nbsp;<i class="fas fa-chevron-right" aria-hidden="true"></i></h6>
                          <h4>
                              <a href="/blog/2019/12/11/LSS/" rel="prev" title="一文看懂《最大子序列和问题》">
                                  
                                      一文看懂《最大子序列和问题》
                                  
                              </a>
                          </h4>
                          
                              
                              <h6 class="tags">
                                  <a class="tag" href="/blog/tags/数据结构/"><i class="fas fa-tag fa-fw" aria-hidden="true"></i> 数据结构</a> <a class="tag" href="/blog/tags/算法/"><i class="fas fa-tag fa-fw" aria-hidden="true"></i> 算法</a> <a class="tag" href="/blog/tags/LeetCode/"><i class="fas fa-tag fa-fw" aria-hidden="true"></i> LeetCode</a> <a class="tag" href="/blog/tags/数组/"><i class="fas fa-tag fa-fw" aria-hidden="true"></i> 数组</a>
                              </h6>
                          
                      </span>
                  </section>
              
          </div>
      
    </section>
  </article>



  <!-- 显示推荐文章和评论 -->



  <article class="post white-box comments">
    <section class="article typo">
      <h4><i class="fas fa-comments fa-fw" aria-hidden="true"></i>&nbsp;评论</h4>
      
      
      
        <section id="comments">
          <div id="gitalk-container"></div>
        </section>
      
      
    </section>
  </article>






<!-- 根据页面mathjax变量决定是否加载MathJax数学公式js -->



  <script>
    window.subData = {
      title: '每日一荐 2019-09 汇总',
      tools: true
    }
  </script>


</div>
<aside class='l_side'>
  
    
    
      
      
        
          
          
            
              <section class='widget author'>
  <div class='content pure'>
    
    
    
      <div class="social-wrapper">
        
          
            <a href="/blog/atom.xml"
              class="social fas fa-rss flat-btn"
              target="_blank"
              rel="external nofollow noopener noreferrer">
            </a>
          
        
          
            <a href="https://www.zhihu.com/people/lu-xiao-13-70/activities"
              class="social fab fa-zhihu flat-btn"
              target="_blank"
              rel="external nofollow noopener noreferrer">
            </a>
          
        
          
            <a href="mailto:azl397985856@gmail.com"
              class="social fas fa-envelope flat-btn"
              target="_blank"
              rel="external nofollow noopener noreferrer">
            </a>
          
        
          
            <a href="https://github.com/azl397985856"
              class="social fab fa-github flat-btn"
              target="_blank"
              rel="external nofollow noopener noreferrer">
            </a>
          
        
          
            <a href="https://music.163.com/playlist?id=978545815&userid=632167080"
              class="social fas fa-headphones-alt flat-btn"
              target="_blank"
              rel="external nofollow noopener noreferrer">
            </a>
          
        
      </div>
    
  </div>
</section>

            
          
        
          
          
        
          
          
        
          
          
        
          
          
        
          
          
        
          
          
        
      
        
          
          
        
          
          
            
              
  <section class='widget toc-wrapper'>
    
<header class='pure'>
  <div><i class="fas fa-list fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;本文目录</div>
  
    <!-- <div class='wrapper'><a class="s-toc rightBtn" rel="external nofollow noopener noreferrer" href="javascript:void(0)"><i class="fas fa-thumbtack fa-fw"></i></a></div> -->
  
</header>

    <div class='content pure'>
      <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#2019-09"><span class="toc-text">2019-09</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2019-09-30-工具"><span class="toc-text">2019-09-30[工具]</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2019-09-29-工具"><span class="toc-text">2019-09-29[工具]</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2019-09-27-类库"><span class="toc-text">2019-09-27[类库]</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2019-09-26-工具"><span class="toc-text">2019-09-26[工具]</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2019-09-25-技能"><span class="toc-text">2019-09-25[技能]</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2019-09-24-工具"><span class="toc-text">2019-09-24[工具]</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2019-09-23-好文"><span class="toc-text">2019-09-23[好文]</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2019-09-20-工具"><span class="toc-text">2019-09-20[工具]</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2019-09-19-工具"><span class="toc-text">2019-09-19[工具]</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2019-09-18-工具"><span class="toc-text">2019-09-18[工具]</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2019-09-17-学习方法"><span class="toc-text">2019-09-17[学习方法]</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2019-09-16-工具"><span class="toc-text">2019-09-16[工具]</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2019-09-12-类库"><span class="toc-text">2019-09-12[类库]</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2019-09-11-技能"><span class="toc-text">2019-09-11[技能]</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2019-09-10-类库"><span class="toc-text">2019-09-10[类库]</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2019-09-09-类库"><span class="toc-text">2019-09-09[类库]</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2019-09-06-学习方法-好文"><span class="toc-text">2019-09-06[学习方法, 好文]</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2019-09-05-类库"><span class="toc-text">2019-09-05[类库]</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#历史汇总"><span class="toc-text">历史汇总</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#关注我"><span class="toc-text">关注我</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#贡献"><span class="toc-text">贡献</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#License"><span class="toc-text">License</span></a></li></ol>
    </div>
  </section>


            
          
        
          
          
        
          
          
        
          
          
        
          
          
        
          
          
        
      
        
          
          
        
          
          
        
          
          
            
              <section class='widget grid'>
  
<header class='pure'>
  <div><i class="fas fa-map-signs fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;我的开源项目</div>
  
</header>

  <div class='content pure'>
    <ul class="grid navgation">
      
        <li><a class="flat-box" title="https://github.com/azl397985856/leetcode" href="https://github.com/azl397985856/leetcode"
          
          
          id="https:github.comazl397985856leetcode">
          
            <i class="fab fa-github fa-fw" aria-hidden="true"></i>
          
          LeetCode
        </a></li>
      
        <li><a class="flat-box" title="https://github.com/azl397985856/fe-interview" href="https://github.com/azl397985856/fe-interview"
          
          
          id="https:github.comazl397985856fe-interview">
          
            <i class="fab fa-github fa-fw" aria-hidden="true"></i>
          
          大前端
        </a></li>
      
        <li><a class="flat-box" title="https://github.com/azl397985856/daily-featured" href="https://github.com/azl397985856/daily-featured"
          
          
          id="https:github.comazl397985856daily-featured">
          
            <i class="fab fa-github fa-fw" aria-hidden="true"></i>
          
          每日一荐
        </a></li>
      
    </ul>
  </div>
</section>

            
          
        
          
          
        
          
          
        
          
          
        
          
          
        
      
        
          
          
        
          
          
        
          
          
        
          
          
            
              
  <section class='widget category'>
    
<header class='pure'>
  <div><i class="fas fa-folder-open fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;全部分类</div>
  
    <a class="rightBtn"
    
      rel="external nofollow noopener noreferrer"
    
    
    href="/blog/categories/"
    title="categories/">
    <i class="fas fa-expand-arrows-alt fa-fw"></i></a>
  
</header>

    <div class='content pure'>
      <ul class="entry">
        
          <li><a class="flat-box" title="/blog/categories/91天学算法/" href="/blog/categories/91天学算法/"><div class='name'>91天学算法</div><div class='badge'>(4)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/Easy/" href="/blog/categories/Easy/"><div class='name'>Easy</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/Hard/" href="/blog/categories/Hard/"><div class='name'>Hard</div><div class='badge'>(3)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/LeetCode/" href="/blog/categories/LeetCode/"><div class='name'>LeetCode</div><div class='badge'>(15)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/LeetCode/LeetCode题解书/" href="/blog/categories/LeetCode/LeetCode题解书/"><div class='name'>LeetCode题解书</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/LeetCode/动态规划/" href="/blog/categories/LeetCode/动态规划/"><div class='name'>动态规划</div><div class='badge'>(2)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/Medium/" href="/blog/categories/Medium/"><div class='name'>Medium</div><div class='badge'>(2)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/React/" href="/blog/categories/React/"><div class='name'>React</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/TypeScript/" href="/blog/categories/TypeScript/"><div class='name'>TypeScript</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/中等/" href="/blog/categories/中等/"><div class='name'>中等</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/书/" href="/blog/categories/书/"><div class='name'>书</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/书/算法/" href="/blog/categories/书/算法/"><div class='name'>算法</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/书摘/" href="/blog/categories/书摘/"><div class='name'>书摘</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/二叉树/" href="/blog/categories/二叉树/"><div class='name'>二叉树</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/前端/" href="/blog/categories/前端/"><div class='name'>前端</div><div class='badge'>(14)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/前端/TypeScript/" href="/blog/categories/前端/TypeScript/"><div class='name'>TypeScript</div><div class='badge'>(2)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/前端/TypeScript/泛型/" href="/blog/categories/前端/TypeScript/泛型/"><div class='name'>泛型</div><div class='badge'>(2)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/前端/eslint/" href="/blog/categories/前端/eslint/"><div class='name'>eslint</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/前端/web-component/" href="/blog/categories/前端/web-component/"><div class='name'>web-component</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/前端/测试/" href="/blog/categories/前端/测试/"><div class='name'>测试</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/前端/浏览器/" href="/blog/categories/前端/浏览器/"><div class='name'>浏览器</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/前端/算法/" href="/blog/categories/前端/算法/"><div class='name'>算法</div><div class='badge'>(4)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/前端/组件化/" href="/blog/categories/前端/组件化/"><div class='name'>组件化</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/力扣加加/" href="/blog/categories/力扣加加/"><div class='name'>力扣加加</div><div class='badge'>(5)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/学习方法/" href="/blog/categories/学习方法/"><div class='name'>学习方法</div><div class='badge'>(2)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/异议！/" href="/blog/categories/异议！/"><div class='name'>异议！</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/技术大会/" href="/blog/categories/技术大会/"><div class='name'>技术大会</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/技术大会/D2/" href="/blog/categories/技术大会/D2/"><div class='name'>D2</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/技术大会/Google-IO/" href="/blog/categories/技术大会/Google-IO/"><div class='name'>Google IO</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/技术大会/JSConf/" href="/blog/categories/技术大会/JSConf/"><div class='name'>JSConf</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/技术大会/QCon/" href="/blog/categories/技术大会/QCon/"><div class='name'>QCon</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/技术大会/React-Conf/" href="/blog/categories/技术大会/React-Conf/"><div class='name'>React Conf</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/数据结构/" href="/blog/categories/数据结构/"><div class='name'>数据结构</div><div class='badge'>(23)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/数据结构/hashtable/" href="/blog/categories/数据结构/hashtable/"><div class='name'>hashtable</div><div class='badge'>(6)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/数据结构/二叉搜索树/" href="/blog/categories/数据结构/二叉搜索树/"><div class='name'>二叉搜索树</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/数据结构/图/" href="/blog/categories/数据结构/图/"><div class='name'>图</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/数据结构/字符串/" href="/blog/categories/数据结构/字符串/"><div class='name'>字符串</div><div class='badge'>(2)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/数据结构/平衡二叉树/" href="/blog/categories/数据结构/平衡二叉树/"><div class='name'>平衡二叉树</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/数据结构/数组/" href="/blog/categories/数据结构/数组/"><div class='name'>数组</div><div class='badge'>(6)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/数据结构/算法/" href="/blog/categories/数据结构/算法/"><div class='name'>算法</div><div class='badge'>(5)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/数据结构/链表/" href="/blog/categories/数据结构/链表/"><div class='name'>链表</div><div class='badge'>(2)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/数据结构，二叉树/" href="/blog/categories/数据结构，二叉树/"><div class='name'>数据结构，二叉树</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/数据结构，单调栈/" href="/blog/categories/数据结构，单调栈/"><div class='name'>数据结构，单调栈</div><div class='badge'>(2)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/数据结构，字符串/" href="/blog/categories/数据结构，字符串/"><div class='name'>数据结构，字符串</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/数据结构，数组/" href="/blog/categories/数据结构，数组/"><div class='name'>数据结构，数组</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/日记/" href="/blog/categories/日记/"><div class='name'>日记</div><div class='badge'>(2)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/日记/技术/" href="/blog/categories/日记/技术/"><div class='name'>技术</div><div class='badge'>(2)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/每日一荐/" href="/blog/categories/每日一荐/"><div class='name'>每日一荐</div><div class='badge'>(6)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/每日一荐/2019-09/" href="/blog/categories/每日一荐/2019-09/"><div class='name'>2019-09</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/每日一荐/2019-10/" href="/blog/categories/每日一荐/2019-10/"><div class='name'>2019-10</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/每日一荐/2019-11/" href="/blog/categories/每日一荐/2019-11/"><div class='name'>2019-11</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/每日一荐/2019-12/" href="/blog/categories/每日一荐/2019-12/"><div class='name'>2019-12</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/每日一荐/2020-01/" href="/blog/categories/每日一荐/2020-01/"><div class='name'>2020-01</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/每日一荐/2020-03/" href="/blog/categories/每日一荐/2020-03/"><div class='name'>2020-03</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/浏览器/" href="/blog/categories/浏览器/"><div class='name'>浏览器</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/浏览器/事件/" href="/blog/categories/浏览器/事件/"><div class='name'>事件</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/电影/" href="/blog/categories/电影/"><div class='name'>电影</div><div class='badge'>(2)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/电影/观后感/" href="/blog/categories/电影/观后感/"><div class='name'>观后感</div><div class='badge'>(2)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/算法/" href="/blog/categories/算法/"><div class='name'>算法</div><div class='badge'>(20)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/BFS/" href="/blog/categories/算法/BFS/"><div class='name'>BFS</div><div class='badge'>(2)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/DFS/" href="/blog/categories/算法/DFS/"><div class='name'>DFS</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/二分法/" href="/blog/categories/算法/二分法/"><div class='name'>二分法</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/位运算/" href="/blog/categories/算法/位运算/"><div class='name'>位运算</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/前缀和/" href="/blog/categories/算法/前缀和/"><div class='name'>前缀和</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/动态规划/" href="/blog/categories/算法/动态规划/"><div class='name'>动态规划</div><div class='badge'>(4)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/双指针/" href="/blog/categories/算法/双指针/"><div class='name'>双指针</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/回文/" href="/blog/categories/算法/回文/"><div class='name'>回文</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/回溯/" href="/blog/categories/算法/回溯/"><div class='name'>回溯</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/子序列/" href="/blog/categories/算法/子序列/"><div class='name'>子序列</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/就地算法/" href="/blog/categories/算法/就地算法/"><div class='name'>就地算法</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/布隆过滤器/" href="/blog/categories/算法/布隆过滤器/"><div class='name'>布隆过滤器</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/循环移位/" href="/blog/categories/算法/循环移位/"><div class='name'>循环移位</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/数学/" href="/blog/categories/算法/数学/"><div class='name'>数学</div><div class='badge'>(2)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/概率/" href="/blog/categories/算法/概率/"><div class='name'>概率</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/母题/" href="/blog/categories/算法/母题/"><div class='name'>母题</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/状态压缩/" href="/blog/categories/算法/状态压缩/"><div class='name'>状态压缩</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/背包问题/" href="/blog/categories/算法/背包问题/"><div class='name'>背包问题</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/递归/" href="/blog/categories/算法/递归/"><div class='name'>递归</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box child" title="/blog/categories/算法/链表反转/" href="/blog/categories/算法/链表反转/"><div class='name'>链表反转</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/算法，动态规划/" href="/blog/categories/算法，动态规划/"><div class='name'>算法，动态规划</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/算法，序列化/" href="/blog/categories/算法，序列化/"><div class='name'>算法，序列化</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/算法，滑动窗口/" href="/blog/categories/算法，滑动窗口/"><div class='name'>算法，滑动窗口</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/经验分享/" href="/blog/categories/经验分享/"><div class='name'>经验分享</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/编程之美/" href="/blog/categories/编程之美/"><div class='name'>编程之美</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/解题模板/" href="/blog/categories/解题模板/"><div class='name'>解题模板</div><div class='badge'>(1)</div></a></li>
        
          <li><a class="flat-box" title="/blog/categories/贪婪/" href="/blog/categories/贪婪/"><div class='name'>贪婪</div><div class='badge'>(1)</div></a></li>
        
      </ul>
    </div>
  </section>


            
          
        
          
          
        
          
          
        
          
          
        
      
        
          
          
        
          
          
        
          
          
        
          
          
        
          
          
            
              
  <section class='widget tagcloud'>
    
<header class='pure'>
  <div><i class="fas fa-tags fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;热门标签</div>
  
    <a class="rightBtn"
    
      rel="external nofollow noopener noreferrer"
    
    
    href="/blog/tags/"
    title="tags/">
    <i class="fas fa-expand-arrows-alt fa-fw"></i></a>
  
</header>

    <div class='content pure'>
      <a href="/blog/tags/91天学算法/" style="font-size: 17px; color: #858585">91天学算法</a> <a href="/blog/tags/BFS/" style="font-size: 14px; color: #999">BFS</a> <a href="/blog/tags/BigPipe/" style="font-size: 14px; color: #999">BigPipe</a> <a href="/blog/tags/Canvas/" style="font-size: 14px; color: #999">Canvas</a> <a href="/blog/tags/Chrome/" style="font-size: 14px; color: #999">Chrome</a> <a href="/blog/tags/D2/" style="font-size: 14px; color: #999">D2</a> <a href="/blog/tags/Easy/" style="font-size: 14px; color: #999">Easy</a> <a href="/blog/tags/Floyd-Warshall/" style="font-size: 14px; color: #999">Floyd-Warshall</a> <a href="/blog/tags/Google-IO/" style="font-size: 14px; color: #999">Google IO</a> <a href="/blog/tags/Hard/" style="font-size: 14px; color: #999">Hard</a> <a href="/blog/tags/JSConf/" style="font-size: 14px; color: #999">JSConf</a> <a href="/blog/tags/LeetCode/" style="font-size: 22px; color: #636363">LeetCode</a> <a href="/blog/tags/LeetCode日记/" style="font-size: 20px; color: #707070">LeetCode日记</a> <a href="/blog/tags/Mac/" style="font-size: 14px; color: #999">Mac</a> <a href="/blog/tags/Medium/" style="font-size: 15px; color: #929292">Medium</a> <a href="/blog/tags/PPT/" style="font-size: 14px; color: #999">PPT</a> <a href="/blog/tags/QCon/" style="font-size: 14px; color: #999">QCon</a> <a href="/blog/tags/RFC/" style="font-size: 14px; color: #999">RFC</a> <a href="/blog/tags/React/" style="font-size: 14px; color: #999">React</a> <a href="/blog/tags/TypeScript/" style="font-size: 16px; color: #8b8b8b">TypeScript</a> <a href="/blog/tags/eslint/" style="font-size: 14px; color: #999">eslint</a> <a href="/blog/tags/immutable/" style="font-size: 14px; color: #999">immutable</a> <a href="/blog/tags/immutablejs/" style="font-size: 14px; color: #999">immutablejs</a> <a href="/blog/tags/vue/" style="font-size: 14px; color: #999">vue</a> <a href="/blog/tags/web-component/" style="font-size: 14px; color: #999">web-component</a> <a href="/blog/tags/中等/" style="font-size: 14px; color: #999">中等</a> <a href="/blog/tags/书/" style="font-size: 14px; color: #999">书</a> <a href="/blog/tags/书摘/" style="font-size: 14px; color: #999">书摘</a> <a href="/blog/tags/事件/" style="font-size: 14px; color: #999">事件</a> <a href="/blog/tags/事件循环/" style="font-size: 14px; color: #999">事件循环</a> <a href="/blog/tags/二叉树/" style="font-size: 16px; color: #8b8b8b">二叉树</a> <a href="/blog/tags/位运算/" style="font-size: 14px; color: #999">位运算</a> <a href="/blog/tags/删除-k-个字符/" style="font-size: 14px; color: #999">删除 k 个字符</a> <a href="/blog/tags/前端/" style="font-size: 21px; color: #696969">前端</a> <a href="/blog/tags/前缀和/" style="font-size: 15px; color: #929292">前缀和</a> <a href="/blog/tags/前缀表达式/" style="font-size: 14px; color: #999">前缀表达式</a> <a href="/blog/tags/力扣加加/" style="font-size: 18px; color: #7e7e7e">力扣加加</a> <a href="/blog/tags/动态规划/" style="font-size: 18px; color: #7e7e7e">动态规划</a> <a href="/blog/tags/单元测试/" style="font-size: 14px; color: #999">单元测试</a> <a href="/blog/tags/困难/" style="font-size: 14px; color: #999">困难</a> <a href="/blog/tags/图/" style="font-size: 14px; color: #999">图</a> <a href="/blog/tags/图片处理/" style="font-size: 14px; color: #999">图片处理</a> <a href="/blog/tags/字符串/" style="font-size: 14px; color: #999">字符串</a> <a href="/blog/tags/字节跳动/" style="font-size: 14px; color: #999">字节跳动</a> <a href="/blog/tags/学习方法/" style="font-size: 15px; color: #929292">学习方法</a> <a href="/blog/tags/序列化/" style="font-size: 14px; color: #999">序列化</a> <a href="/blog/tags/异常处理/" style="font-size: 14px; color: #999">异常处理</a> <a href="/blog/tags/异议！/" style="font-size: 14px; color: #999">异议！</a> <a href="/blog/tags/循环移位/" style="font-size: 14px; color: #999">循环移位</a> <a href="/blog/tags/微前端/" style="font-size: 14px; color: #999">微前端</a> <a href="/blog/tags/必备软件/" style="font-size: 14px; color: #999">必备软件</a> <a href="/blog/tags/我的书/" style="font-size: 14px; color: #999">我的书</a> <a href="/blog/tags/扩展程序/" style="font-size: 14px; color: #999">扩展程序</a> <a href="/blog/tags/技术大会/" style="font-size: 14px; color: #999">技术大会</a> <a href="/blog/tags/技术调研/" style="font-size: 14px; color: #999">技术调研</a> <a href="/blog/tags/技能/" style="font-size: 14px; color: #999">技能</a> <a href="/blog/tags/数学/" style="font-size: 15px; color: #929292">数学</a> <a href="/blog/tags/数据结构/" style="font-size: 23px; color: #5c5c5c">数据结构</a> <a href="/blog/tags/数据结构，算法，LeetCode-日记，Hard/" style="font-size: 15px; color: #929292">数据结构，算法，LeetCode 日记，Hard</a> <a href="/blog/tags/数据结构，算法，LeetCode-日记，中等/" style="font-size: 14px; color: #999">数据结构，算法，LeetCode 日记，中等</a> <a href="/blog/tags/数组/" style="font-size: 15px; color: #929292">数组</a> <a href="/blog/tags/日记/" style="font-size: 15px; color: #929292">日记</a> <a href="/blog/tags/最长上升子序列/" style="font-size: 14px; color: #999">最长上升子序列</a> <a href="/blog/tags/最长公共子序列/" style="font-size: 14px; color: #999">最长公共子序列</a> <a href="/blog/tags/概率/" style="font-size: 14px; color: #999">概率</a> <a href="/blog/tags/母题/" style="font-size: 14px; color: #999">母题</a> <a href="/blog/tags/每日一荐/" style="font-size: 19px; color: #777">每日一荐</a> <a href="/blog/tags/泛型/" style="font-size: 15px; color: #929292">泛型</a> <a href="/blog/tags/测试/" style="font-size: 14px; color: #999">测试</a> <a href="/blog/tags/浏览器/" style="font-size: 15px; color: #929292">浏览器</a> <a href="/blog/tags/滑动窗口/" style="font-size: 15px; color: #929292">滑动窗口</a> <a href="/blog/tags/滤镜/" style="font-size: 14px; color: #999">滤镜</a> <a href="/blog/tags/状态压缩/" style="font-size: 14px; color: #999">状态压缩</a> <a href="/blog/tags/状态机/" style="font-size: 14px; color: #999">状态机</a> <a href="/blog/tags/电影/" style="font-size: 15px; color: #929292">电影</a> <a href="/blog/tags/监控/" style="font-size: 14px; color: #999">监控</a> <a href="/blog/tags/算法/" style="font-size: 24px; color: #555">算法</a> <a href="/blog/tags/算法提高班/" style="font-size: 18px; color: #7e7e7e">算法提高班</a> <a href="/blog/tags/算法系列/" style="font-size: 17px; color: #858585">算法系列</a> <a href="/blog/tags/组件化/" style="font-size: 14px; color: #999">组件化</a> <a href="/blog/tags/经验分享/" style="font-size: 15px; color: #929292">经验分享</a> <a href="/blog/tags/编程之美/" style="font-size: 14px; color: #999">编程之美</a> <a href="/blog/tags/草稿/" style="font-size: 14px; color: #999">草稿</a> <a href="/blog/tags/装机/" style="font-size: 14px; color: #999">装机</a> <a href="/blog/tags/解题模板/" style="font-size: 14px; color: #999">解题模板</a> <a href="/blog/tags/贪婪/" style="font-size: 14px; color: #999">贪婪</a> <a href="/blog/tags/贪心/" style="font-size: 14px; color: #999">贪心</a> <a href="/blog/tags/递归/" style="font-size: 14px; color: #999">递归</a> <a href="/blog/tags/链表/" style="font-size: 15px; color: #929292">链表</a> <a href="/blog/tags/陷阱题/" style="font-size: 14px; color: #999">陷阱题</a>
    </div>
  </section>


            
          
        
          
          
        
          
          
        
      
        
          
          
        
          
          
        
          
          
        
          
          
        
          
          
        
          
          
        
          
          
            
              <section class='widget list'>
  
<header class='pure'>
  <div><i class="fas fa-thumbs-up fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;强烈推荐</div>
  
</header>

  <div class='content pure'>
    <ul class="entry">
      
        <li><a class="flat-box" title="https://xaoxuu.com/wiki/hexo.sh/" href="https://xaoxuu.com/wiki/hexo.sh/"
          
          
          >
          <div class='name'>
            
              <i class=" fa-fw" aria-hidden="true"></i>
            
            &nbsp;&nbsp;Hexo脚本（Mac）
          </div>
          
        </a></li>
      
        <li><a class="flat-box" title="https://xaoxuu.com/wiki/vim-cn.sh/" href="https://xaoxuu.com/wiki/vim-cn.sh/"
          
          
          >
          <div class='name'>
            
              <i class=" fa-fw" aria-hidden="true"></i>
            
            &nbsp;&nbsp;图床脚本（Mac）
          </div>
          
        </a></li>
      
        <li><a class="flat-box" title="https://yasuotu.com" href="https://yasuotu.com"
          
          
          >
          <div class='name'>
            
              <i class=" fa-fw" aria-hidden="true"></i>
            
            &nbsp;&nbsp;图片在线压缩
          </div>
          
        </a></li>
      
        <li><a class="flat-box" title="https://realfavicongenerator.net" href="https://realfavicongenerator.net"
          
          
          >
          <div class='name'>
            
              <i class=" fa-fw" aria-hidden="true"></i>
            
            &nbsp;&nbsp;生成Favicon
          </div>
          
        </a></li>
      
        <li><a class="flat-box" title="https://mxclub.github.io/resume/" href="https://mxclub.github.io/resume/"
          
          
          >
          <div class='name'>
            
              <i class=" fa-fw" aria-hidden="true"></i>
            
            &nbsp;&nbsp;简历主题
          </div>
          
        </a></li>
      
    </ul>
  </div>
</section>

            
          
        
      
        
          
          
        
          
          
        
          
          
        
          
          
        
          
          
        
          
          
        
          
          
        
      
    

  
</aside>

<footer id="footer" class="clearfix">
   
  <div class="social-wrapper">
     
    <a
      href="/blog/atom.xml"
      class="social fas fa-rss flat-btn"
      target="_blank"
      rel="external nofollow noopener noreferrer"
    >
    </a>
      
    <a
      href="https://www.zhihu.com/people/lu-xiao-13-70/activities"
      class="social fab fa-zhihu flat-btn"
      target="_blank"
      rel="external nofollow noopener noreferrer"
    >
    </a>
      
    <a
      href="mailto:azl397985856@gmail.com"
      class="social fas fa-envelope flat-btn"
      target="_blank"
      rel="external nofollow noopener noreferrer"
    >
    </a>
      
    <a
      href="https://github.com/azl397985856"
      class="social fab fa-github flat-btn"
      target="_blank"
      rel="external nofollow noopener noreferrer"
    >
    </a>
      
    <a
      href="https://music.163.com/playlist?id=978545815&amp;userid=632167080"
      class="social fas fa-headphones-alt flat-btn"
      target="_blank"
      rel="external nofollow noopener noreferrer"
    >
    </a>
     
  </div>
  
  <br />
  <div><p>博客内容遵循 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议</a></p>
</div>
  <div>
    本站使用
    <a href="https://xaoxuu.com/wiki/material-x/" target="_blank" class="codename"
      >Material X</a
    >
    作为主题  ， 总访问量为
    <span id="busuanzi_value_site_pv"
      ><i class="fas fa-spinner fa-spin fa-fw" aria-hidden="true"></i
    ></span>
    次  。
  </div>

  <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
  <script>
    var now = new Date();
    function createtime() {
      var grt = new Date("08/10/2018 17:38:00"); //在此处修改你的建站时间，格式：月/日/年 时:分:秒
      now.setTime(now.getTime() + 250);
      days = (now - grt) / 1000 / 60 / 60 / 24;
      dnum = Math.floor(days);
      hours = (now - grt) / 1000 / 60 / 60 - 24 * dnum;
      hnum = Math.floor(hours);
      if (String(hnum).length == 1) {
        hnum = "0" + hnum;
      }
      minutes = (now - grt) / 1000 / 60 - 24 * 60 * dnum - 60 * hnum;
      mnum = Math.floor(minutes);
      if (String(mnum).length == 1) {
        mnum = "0" + mnum;
      }
      seconds =
        (now - grt) / 1000 - 24 * 60 * 60 * dnum - 60 * 60 * hnum - 60 * mnum;
      snum = Math.round(seconds);
      if (String(snum).length == 1) {
        snum = "0" + snum;
      }
      document.getElementById("timeDate").innerHTML =
        "本站已安全运行 " + dnum + " 天 ";
      document.getElementById("times").innerHTML =
        hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
    setInterval("createtime()", 250);
  </script>
</footer>
<script>
  setLoadingBarProgress(80);
</script>


      <script>setLoadingBarProgress(60);</script>
    </div>
    <a class="s-top fas fa-arrow-up fa-fw" href='javascript:void(0)'></a>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>

  <script>
    var GOOGLE_CUSTOM_SEARCH_API_KEY = "";
    var GOOGLE_CUSTOM_SEARCH_ENGINE_ID = "";
    var ALGOLIA_API_KEY = "";
    var ALGOLIA_APP_ID = "";
    var ALGOLIA_INDEX_NAME = "";
    var AZURE_SERVICE_NAME = "";
    var AZURE_INDEX_NAME = "";
    var AZURE_QUERY_KEY = "";
    var BAIDU_API_ID = "";
    var SEARCH_SERVICE = "hexo" || "hexo";
    var ROOT = "/blog/"||"/";
    if(!ROOT.endsWith('/'))ROOT += '/';
  </script>

<script src="//instant.page/1.2.2" type="module" integrity="sha384-2xV8M5griQmzyiY3CDqh1dn4z3llDVqZDqzjzcY+jCBCk/a5fXJmuZ/40JJAPeoU"></script>


  <script async src="https://cdn.jsdelivr.net/npm/scrollreveal@4.0.5/dist/scrollreveal.min.js"></script>
  <script type="text/javascript">
    $(function() {
      const $reveal = $('.reveal');
      if ($reveal.length === 0) return;
      const sr = ScrollReveal({ distance: 0 });
      sr.reveal('.reveal');
    });
  </script>


  <script src="https://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.js"></script>
  <script type="text/javascript">
    $(function() {
      Waves.attach('.flat-btn', ['waves-button']);
      Waves.attach('.float-btn', ['waves-button', 'waves-float']);
      Waves.attach('.float-btn-light', ['waves-button', 'waves-float', 'waves-light']);
      Waves.attach('.flat-box', ['waves-block']);
      Waves.attach('.float-box', ['waves-block', 'waves-float']);
      Waves.attach('.waves-image');
      Waves.init();
    });
  </script>


  <script async src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-busuanzi@2.3/js/busuanzi.pure.mini.js"></script>




  
  
  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
    <script type="text/javascript">
      $(function(){
        if ('.cover') {
          $('.cover').backstretch(
          ["https://img.vim-cn.com/29/91197b04c13f512f734a76d4ac422d89dbe229.jpg"],
          {
            duration: "6000",
            fade: "2500"
          });
        } else {
          $.backstretch(
          ["https://img.vim-cn.com/29/91197b04c13f512f734a76d4ac422d89dbe229.jpg"],
          {
            duration: "6000",
            fade: "2500"
          });
        }
      });
    </script>
  







  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
  <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
  <script type="text/javascript">
    var gitalk = new Gitalk({
      clientID: "aea1377036afe4cd0343",
      clientSecret: "815c638dea8644b7a4b97905707cf72b45555f6d",
      repo: "blog",
      owner: "azl397985856",
      admin: "azl397985856",
      
        id: location.pathname,      // Ensure uniqueness and length less than 50
      
      distractionFreeMode: false  // Facebook-like distraction free mode
    });
    gitalk.render('gitalk-container');
  </script>





  <script src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@19.9/js/app.js"></script>


  <script src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@19.9/js/search.js"></script>




<!-- 复制 -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
  let COPY_SUCCESS = "复制成功";
  let COPY_FAILURE = "复制失败";
  /*页面载入完成后，创建复制按钮*/
  !function (e, t, a) {
    /* code */
    var initCopyCode = function(){
      var copyHtml = '';
      copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
      copyHtml += '  <i class="fa fa-copy"></i><span>复制</span>';
      copyHtml += '</button>';
      $(".highlight .code pre").before(copyHtml);
      var clipboard = new ClipboardJS('.btn-copy', {
        target: function(trigger) {
          return trigger.nextElementSibling;
        }
      });

      clipboard.on('success', function(e) {
        //您可以加入成功提示
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        success_prompt(COPY_SUCCESS);
        e.clearSelection();
      });
      clipboard.on('error', function(e) {
        //您可以加入失败提示
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
        fail_prompt(COPY_FAILURE);
      });
    }
    initCopyCode();

  }(window, document);

  /**
   * 弹出式提示框，默认1.5秒自动消失
   * @param message 提示信息
   * @param style 提示样式，有alert-success、alert-danger、alert-warning、alert-info
   * @param time 消失时间
   */
  var prompt = function (message, style, time)
  {
      style = (style === undefined) ? 'alert-success' : style;
      time = (time === undefined) ? 1500 : time*1000;
      $('<div>')
          .appendTo('body')
          .addClass('alert ' + style)
          .html(message)
          .show()
          .delay(time)
          .fadeOut();
  };

  // 成功提示
  var success_prompt = function(message, time)
  {
      prompt(message, 'alert-success', time);
  };

  // 失败提示
  var fail_prompt = function(message, time)
  {
      prompt(message, 'alert-danger', time);
  };

  // 提醒
  var warning_prompt = function(message, time)
  {
      prompt(message, 'alert-warning', time);
  };

  // 信息提示
  var info_prompt = function(message, time)
  {
      prompt(message, 'alert-info', time);
  };

</script>


<!-- fancybox -->
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script>
  let LAZY_LOAD_IMAGE = "";
  $(".article-entry").find("fancybox").find("img").each(function () {
      var element = document.createElement("a");
      $(element).attr("data-fancybox", "gallery");
      $(element).attr("href", $(this).attr("src"));
      /* 图片采用懒加载处理时,
       * 一般图片标签内会有个属性名来存放图片的真实地址，比如 data-original,
       * 那么此处将原本的属性名src替换为对应属性名data-original,
       * 修改如下
       */
       if (LAZY_LOAD_IMAGE) {
         $(element).attr("href", $(this).attr("data-original"));
       }
      $(this).wrap(element);
  });
</script>





  <script>setLoadingBarProgress(100);</script>
  <!-- <script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
  <script>
      const btw = new BTWPlugin();
      btw.init({
          id: 'container',
          blogId: '17446-1571644985832-648',
          name: '脑洞前端',
          qrcode: 'https://lucifer-1259702774.cos.ap-shanghai.myqcloud.com/2019-09-19-085421.jpg',
          keyword: 'more',
      });
  </script> -->
</body>
</html>
